/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import styles from './tcorder.module.css'
import Space from "@/pages/components/space/space";
import Card from "@/pages/components/card/card";
import LineRow from "@/pages/components/line/lineRow";
import Paragraph from "@/pages/components/paragraph/paragraph";
import Title from "@/pages/components/paragraph/title";
import Text from "@/pages/components/paragraph/text";
import Table from "@/pages/components/table/table";
import FlexRow from "@/pages/components/flexLayout/flexRow";
import SubmitButton from "@/pages/components/submitButton/submitButton";

export default function TcOrderLayout() {

    const [isLoading, setIsLoading] = useState(false);

    const headerList = [
        { title: 'Product', dataIndex: 'product', },
        { title: 'User ID', dataIndex: 'user_id' },
        { title: 'Order ID', dataIndex: 'order_id' },
        { title: 'Apply Status', dataIndex: 'apply_status' },
        { title: 'Order Status', dataIndex: 'order_status' },
        { title: 'Create Time', dataIndex: 'create_time' },
        { title: 'Operation', dataIndex: 'operation' }
    ];

    const dataList = [
        { product: 'x', user_id: 'xxx', order_id: 'xxx', apply_status: 'xxx', order_status: 'xxx', create_time: 'xxx', operation: 'xxx' },
        { product: 'x', user_id: 'xxx', order_id: 'xxx', apply_status: 'xxx', order_status: 'xxx', create_time: 'xxx', operation: 'xxx' },
        { product: 'x', user_id: 'xxx', order_id: 'xxx', apply_status: 'xxx', order_status: 'xxx', create_time: 'xxx', operation: 'xxx' },
        { product: 'x', user_id: 'xxx', order_id: 'xxx', apply_status: 'xxx', order_status: 'xxx', create_time: 'xxx', operation: 'xxx' },
        { product: 'x', user_id: 'xxx', order_id: 'xxx', apply_status: 'xxx', order_status: 'xxx', create_time: 'xxx', operation: 'xxx' },
    ];

    useEffect(() => {
        return () => {
        }
    }, [])

    const onHandleRefresh = async () => {
        setIsLoading(true);
        try {
            // TODO: 实现刷新逻辑
            await new Promise(resolve => setTimeout(resolve, 5000)); // 模拟加载
        } finally {
            setIsLoading(false);
        }
    }

    return (
        <div className={styles.tcAppShowRoot}>
            <Card title="订单信息" style={{ width: '100%' }}>

                <Table
                    headerList={headerList}
                    dataList={dataList}
                    loading={isLoading}
                    onRowClick={(row, index) => {
                        console.log('点击行:', row, index);
                    }}
                />

                {/* 提交区域 */}
                <FlexRow style={{ marginTop: '32px', marginLeft: '2px' }}>
                    <SubmitButton label="刷新" onClick={() => { onHandleRefresh() }} />
                </FlexRow>

                <Space size="24px" />

                <LineRow />
                <Space size="16px" />

                <Paragraph>
                    <Title>说明</Title>
                    <Text>请复制对应的配置到本地修改, 然后再发给后端更新</Text>
                </Paragraph>
            </Card>
        </div>
    )
}